<template>
    <div class="biRecordBox">
        <ul class="bidRecordlist">
            <li v-for="dt in 20" :key="dt">
                <div class="bidimgbox"></div>
                <div class="biditem tbrtx">
                    <h5>投标人@Jack Mao</h5>
                    <p>2021.06.22 10:30</p>
                </div>
                <div class="biditem">
                    <h5>0.185 ETH</h5>
                    <p>$ 423.97</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'

export default {
    components:{
       
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            
        })

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .biRecordBox{
        width: 800px;
        overflow: hidden;
        overflow-y: auto;
        .bidRecordlist{
            width: 100%;
            list-style: none;
            padding: 0 10px;
            font-family: Poppins-Medium, Poppins;
            font-weight: 500;
            color: #FFFFFF;
            line-height: normal;
            li{
                display: flex;
                height: 120px;
                border-left:6px solid #67F8FF ;
                position: relative;
                z-index: 10;
                padding:10px 0 10px 40px;
                &::before{
                    content: '';
                    position: absolute;
                    z-index: 10;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    background: #67F8FF;
                    left: -12px;
                    top: 50%;
                    margin: -5px 0 0 0;
                }
                .bidimgbox{
                    width: 100px;
                    height: 100px;
                    overflow: hidden;
                    border-radius: 50%;
                    background: #aaadad;
                    flex-shrink: 0;
                }
                .biditem{
                    padding: 0 0 0 20px;
                    flex-shrink: 0;
                    &.tbrtx{
                        flex: 1;
                        width: 0;
                    }
                    h5{
                        font-size: 30px;
                        font-weight: 500;
                        padding:2px 0 0 0;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    p{
                        font-size: 28px;
                        color: #7299D2;
                        padding: 10px 0 0 0;
                    }
                }
            }
        }
    }
</style>